<template>
  <div class="pjt-mt-list-view view-container">

    <modules-title class="title-position" titleName="项目列表">

      <template slot="btn">
        <el-button
          v-hasPermi="{v:['xiangmu:manager:add']}"
          type="primary"
          size="mini"
          @click="addClick">创建项目</el-button>
      </template>

    </modules-title>

    <div class="pj-content">

      <div class="screen-view">

        <el-form
          ref="queryForm"
          :model="screenData"
          :inline="true"
          label-width="68px"
        >

          <el-form-item label="项目阶段">
            <el-select
              v-model="screenData.project_phases_id"
              placeholder="请选择阶段"
              size="small"
              @change="typeChange"
            >
              <el-option
                v-for="divt in phasesOptions"
                :key="divt.value"
                :label="divt.label"
                :value="divt.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="项目状态">
            <el-select
              v-model="screenData.status"
              placeholder="请选择状态"
              size="small"
              @change="statusChange"
            >
              <el-option
                v-for="divt in statusOptions"
                :key="divt.value"
                :label="divt.label"
                :value="divt.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="参与类型">
            <el-select
              v-model="screenData.with_me"
              placeholder="请选择类型"
              size="small"
              @change="withChange"
            >
              <el-option
                v-for="dict in withOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="项目类型">
            <el-select
              v-model="screenData.project_category_id"
              placeholder="请选择项目类型"
              @change="categoryChange">
              <el-option
                v-for="(item,index) in projectTypeOptions"
                :key="index"
                :label="item.dict_val"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="关键字">
            <el-input v-model="screenData.project_name" placeholder="请输入关键字" clearable></el-input>
          </el-form-item>

          <el-form-item>

            <el-button type="primary" size="small" @click="handleQuery">搜索
            </el-button>
            <el-button plain size="small" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="tab-view">
        <!--          @row-click="(row, column, event)=>{checkDetailPermis(['xiangmu:manager:detail'])?tableRowClick(row, column, event):null}"-->

        <el-table
          @row-click="tableRowClick"
          :row-style="rowStyle"
          size="medium"
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            :resizable="false"
            header-align="center"
            align="center"
            prop="project_no"
            label="项目编号">
          </el-table-column>
          <el-table-column
            :resizable="false"
            align="left"
            header-align="center"
            prop="project_name"
            label="项目名称"
            width="200px"
          >
            <template slot-scope="scope">
              <span>{{scope.row.project_name}}</span>
              <!--                <span v-if="scope.row.is_apply" style="color: red">(已申请)</span>-->
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            prop="project_level_name"
            align="center"
            label="项目级别">
          </el-table-column>
          <el-table-column
            :resizable="false"
            prop="project_person_in_charge"
            label="项目负责人"
            align="center">
          </el-table-column>
          <el-table-column
            :resizable="false"
            label="项目阶段"
            align="center">
            <template slot-scope="scope">
              <span>{{scope.row.project_phases_id == 1 ? "临床前研究" : "临床研究"}}</span>
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            prop="project_progress"
            label="项目进度"
            align="center">
            <template slot-scope="scope">
              <div>{{scope.row.project_progress}}%</div>
              <div v-if="scope.row.milestone_name" style="color:#e6a23c">[{{scope.row.milestone_name}}]</div>
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            label="已耗时"
            align="center">
            <template slot-scope="scope">
              <span>{{dealTimeConsuming(scope.row)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            prop="plan_start_time"
            label="计划开始时间"
            align="center">
            <template slot-scope="scope">
              {{scope.row.plan_start_time ? dateFormat1('yyyy-mm-dd',scope.row.plan_start_time) : ''}}
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            prop="plan_end_time"
            label="计划结束时间"
            align="center"
            width="130">
            <template slot-scope="scope">
              {{scope.row.plan_end_time ? dateFormat1('yyyy-mm-dd',scope.row.plan_end_time) : ''}}
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            prop="reality_start_time"
            label="实际开始时间"
            align="center">
            <template slot-scope="scope">
              {{scope.row.reality_start_time ? dateFormat1('yyyy-mm-dd',scope.row.reality_start_time) : ""}}
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            prop="reality_end_time"
            label="实际结束时间"
            align="center">
            <template slot-scope="scope">
              {{scope.row.reality_end_time ? dateFormat1('yyyy-mm-dd',scope.row.reality_end_time) : ""}}
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            label="项目状态"
            align="center">
            <template slot-scope="scope">

              <div v-if="scope.row.status == 1">
                <div>启动中</div>
                <div class="status-color10">[待提交方案]</div>
              </div>
              <div v-else-if="scope.row.status == 2">
                <div>启动中</div>
                <div class="status-color10">[方案评审]</div>
              </div>
              <div v-else-if="scope.row.status == 3">
                <div>启动中</div>
                <div class="status-color10">[方案评审中]</div>
              </div>
              <div v-else-if="scope.row.status == 32">
                <div>启动中</div>
                <div class="status-color10">[方案评审拒绝]</div>
              </div>
              <div v-else-if="scope.row.status == 4">
                <div>计划阶段</div>
              </div>
              <div v-else-if="scope.row.status == 5">
                <div>计划阶段</div>
                <div class="status-color10">[计划审批中]</div>
              </div>
              <div v-else-if="scope.row.status == 52">
                <div>计划阶段</div>
                <div class="status-color10">[审批拒绝]</div>
              </div>
              <div v-else-if="scope.row.status == 53">
                <div>计划阶段</div>
                <div class="status-color10">[待项目开始]</div>
              </div>
              <div v-else-if="scope.row.status == 6">
                <div>进行中</div>
              </div>
              <div v-else-if="scope.row.status == 61">
                <div>进行中</div>
                <div class="status-color10">[暂停审批中]</div>
              </div>
              <div v-else-if="scope.row.status == 62">
                <div>进行中</div>
                <div class="status-color10">[暂停审批拒绝]</div>
              </div>
              <div v-else-if="scope.row.status == 63">
                <div>进行中</div>
                <div class="status-color10">[终止审批中]</div>
              </div>
              <div v-else-if="scope.row.status == 64">
                <div>进行中</div>
                <div class="status-color10">[终止审批拒绝]</div>
              </div>
              <div v-else-if="scope.row.status == 7">
                <div>验收中</div>
                <div class="status-color10">[验收材料审核]</div>
              </div>
              <div v-else-if="scope.row.status == 8">
                <div>已暂停</div>
              </div>
              <div v-else-if="scope.row.status == 9">
                <div>已终止</div>
              </div>
              <div v-else-if="scope.row.status == 71">
                <div>验收中</div>
                <div class="status-color10">[验收评审]</div>
              </div>
              <div v-else-if="scope.row.status == 72">
                <div>验收中</div>
                <div class="status-color10">[材料审核未通过]</div>
              </div>
              <div v-else-if="scope.row.status == 74">
                <div>结题会议通过</div>
              </div>
              <div v-else-if="scope.row.status == 75">
                <div>验收不合格</div>
              </div>
              <div v-else-if="scope.row.status == 76">
                <div>验收中</div>
                <div class="status-color10">[整改再验收]</div>
              </div>
              <div v-else-if="scope.row.status == 77">
                <div>结题验收中</div>
              </div>
              <div v-else-if="scope.row.status == 78">
                <div>结题验收通过</div>
              </div>
              <div v-else-if="scope.row.status == 79">
                <div>结题验收驳回</div>
              </div>

              <div v-if="scope.row.deferred_day" class="status-color1">(延期{{scope.row.deferred_day}}天)</div>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            header-align="center"
            label="操作">
            <template slot-scope="scope">

              <div class="tab-opt-view">

                <!--                  <el-button-->
                <!--                    v-hasPermi="{v:['xiangmu:manager:detail'],isF: (scope.row.status > 5 && (scope.row.status != 52 && scope.row.status != 22))}"-->
                <!--                    class="text-btn-yellow"-->
                <!--                    size="medium" type="text"-->
                <!--                    icon="el-icon-document"-->
                <!--                    @click="detailsClick(scope.row)">-->
                <!--                    详情-->
                <!--                  </el-button>-->
                <el-button
                  v-if="(scope.row.status == 4 || scope.row.status == 52) && checkPerson(scope.row.project_person_in_charge_id)"
                  size="medium"
                  type="text"
                  @click="editClick(scope.row)">设置计划</el-button>

                <el-button
                  v-if="(scope.row.status == 1 || scope.row.status == 32) && checkPerson(scope.row.project_person_in_charge_id)"
                  size="medium"
                  type="text"
                  @click="planBookClick(scope.row.id)">提交方案书</el-button>

                <el-button
                  v-if="(scope.row.status == 4 || scope.row.status == 52) && checkPerson(scope.row.project_person_in_charge_id)"
                  size="medium"
                  type="text"
                  @click="auditProject(scope.row.id)">提交审批</el-button>

                <el-button
                  v-if="scope.row.status == 2 && checkPerson(scope.row.project_person_in_charge_id)"
                  size="medium"
                  type="text"
                  @click="createMeeting(scope.row.id)">发起会议</el-button>

                <el-button
                  v-if="scope.row.status == 71 && checkPerson(scope.row.project_person_in_charge_id)"
                  size="medium"
                  type="text"
                  @click="createMeeting1(scope.row.id)">发起会议</el-button>

                <el-button
                  v-if="scope.row.status == 2 && checkPerson(scope.row.project_person_in_charge_id)"
                  size="medium"
                  type="text"
                  @click="planBookCheck(scope.row.id)">提交方案审批</el-button>

                <el-button
                  v-if="(scope.row.status == 6 || scope.row.status == 62 || scope.row.status == 64 ) && checkPerson(scope.row.project_person_in_charge_id)"
                  class="text-btn-red"
                  size="medium"
                  type="text" @click="stopClick(scope.row)">暂停/终止</el-button>

                <el-button
                  v-if="scope.row.status == 8 && checkPerson(scope.row.project_person_in_charge_id)"
                  size="medium"
                  type="text" @click="refreshClick(scope.row.id)">重启项目</el-button>

                <el-button
                  v-if="(scope.row.status == 72 || scope.row.status == 76) && checkPerson(scope.row.project_person_in_charge_id)"
                  size="medium"
                  type="text" @click="reportClick(scope.row)">提交验收报告</el-button>

                <el-button
                  v-if="(scope.row.status == 74 || scope.row.status == 79 ) && checkPerson(scope.row.project_person_in_charge_id)"
                  size="medium"
                  type="text" @click="endClick(scope.row)">项目结题</el-button>

                <el-button
                  v-if="(scope.row.project_phases_id == 1 && scope.row.status == 78) && checkPerson(scope.row.creator_id)"
                  size="medium"
                  type="text"
                  @click="startNext(scope.row.id)">启动临床阶段</el-button>

              </div>

            </template>
          </el-table-column>
        </el-table>

        <pagination style="display:flex;justify-content:flex-end;" :total="total" :page.sync="pageNum"
                    :limit.sync="pageSize" @pagination="getList" />

      </div>

    </div>


    <el-dialog
      v-if="stopVisible"
      title="项目暂停/终止"
      :visible.sync="stopVisible"
      width="700px"
      :before-close="stopClose">

      <stop-and-pause-view ref="stopView" :project="project"></stop-and-pause-view>

      <span slot="footer" class="dialog-footer">
          <el-button @click="stopVisible = false">取 消</el-button>
          <el-button type="primary" @click="stopConfirm">确 定</el-button>
        </span>
    </el-dialog>

    <plan-book-edit-view ref="planBookView" @confirmDataBack="confirmDataBack"></plan-book-edit-view>

    <project-person ref="person" :datas="datas" @success="confirmClick"></project-person>

    <project-end-dialog ref="endDialog" @update="getList"></project-end-dialog>

    <project-report-dialog ref="reportDialog" @update="getList"></project-report-dialog>

  </div>
</template>

<script>
  import projectReportDialog from "../modules/projectReportDialog";
  import projectEndDialog from "../modules/projectEndDialog";
  import projectPerson from "../modules/projectPerson";
    import planBookEditView from "../edit/modules/planBookEditView";
    import stopAndPauseView from "../modules/stopAndPauseView";
    export default {
        name: "index",
        components:{stopAndPauseView,planBookEditView,projectPerson,projectEndDialog,projectReportDialog},
        data:function () {
            return{
                input:'',
                value:'',
                value1:'',

                tableData:[],
                loading:false,
                total:0,
                pageNum:1,
                pageSize:10,

                projectTypeOptions:[],
                withOptions:[
                    {
                        label:'全部',
                        value:0,
                    },
                    {
                        label:'我负责的',
                        value:1,
                    },
                    {
                        label:'我参与的',
                        value:2,
                    },
                ],
                phasesOptions: [
                    {
                        label: "全部",
                        value: "",
                    },
                    {
                        label: "临床前研究",
                        value: "1",
                    },
                    {
                        label: "临床研究",
                        value: "2",
                    },
                ],
                statusOptions:[
                    {
                        label: "全部",
                        value: 0,
                    },
                    {
                        label: "启动中(待提交方案)",
                        value: 1,
                    },
                    {
                        label: "启动中(方案评审)",
                        value: 2,
                    },
                    {
                        label: "方案评审中",
                        value: 3,
                    },
                    {
                        label: "方案审批拒绝",
                        value: 32,
                    },
                    {
                        label: "计划中",
                        value: 4,
                    },
                    {
                        label: "计划审批",
                        value: 5,
                    },
                    {
                        label: "计划审批拒绝",
                        value: 52,
                    },
                    {
                        label: "待项目开始",
                        value: 53,
                    },
                    {
                        label: "进行中",
                        value: 6,
                    },
                    {
                        label: "暂停审批中",
                        value: 61,
                    },
                    {
                        label: "暂停审批拒绝",
                        value: 62,
                    },
                    {
                        label: "终止审批中",
                        value: 63,
                    },
                    {
                        label: "终止审批拒绝",
                        value: 64,
                    },
                    {
                        label: "结题验收",
                        value: 7,
                    },
                    {
                        label: "已暂停",
                        value: 8,
                    },
                    {
                        label: "已终止",
                        value: 9,
                    },
                    {
                        label: "验收材料通过",
                        value: 71,
                    },
                    {
                        label: "验收材料驳回",
                        value: 72,
                    },
                    {
                        label: "结题会议通过",
                        value: 74,
                    },
                    {
                        label: "验收不合格",
                        value: 75,
                    },
                    {
                        label: "整改再验收",
                        value: 76,
                    },
                    {
                        label: "结题验收中",
                        value: 77,
                    },
                    {
                        label: "结题验收通过",
                        value: 78,
                    },
                    {
                        label: "结题验收驳回",
                        value: 79,
                    },

                ],
                screenData:{
                    project_name:'',
                    project_phases_id:"",
                    status:0,
                    with_me:0,
                    project_category_id:'',
                },


                dialogVisible:false,
                datas:{
                    id:'',
                    value:[],
                    project_person_in_charge_id:'',
                    project_person_in_charge:'',
                },
                departments:[],
                props: {
                    value:'id',
                    label:'department_name',
                    lazy: true,
                    lazyLoad : ((node, resolve) => {

                        if (node.level == 1){
                            if (node.data){
                                let d = {
                                    department_id:node.data.id,
                                    limit:1000,
                                    skip:1,
                                }

                                this.$api.GET_USER_LIST(d).then(res=>{
                                    if (res.code == 200){

                                        for (let i = 0; i < res.data.data.length; i++){
                                            res.data.data[i].leaf = true;
                                            res.data.data[i].department_name = res.data.data[i].user_name
                                        }
                                        this.departmentMembers = res.data.data;
                                        resolve(res.data.data);
                                    }else{
                                        this.$message.error(res.msg)
                                    }
                                })
                            }
                        }
                    })
                },

                stopVisible:false,
                project_id:'',
                planBook_id:'',

                user_id:'',

                project:{}

            }
        },
        beforeRouteEnter(to,from,next){
            to.params.refresh = from.params.refresh

            next()
        },
        activated:function(){
            // if (this.$route.params.refresh){
            //     this.getList()
            // }
            this.getList()
        },
        mounted:function(){
            this.getList()
            this.projectTypeOptions = this.$store.getters.sysDic('project_type')
            this.user_id = this.$store.getters.userInfo.user.id;
            this.departments = this.$store.getters.department
        },
        methods:{
            dealTimeConsuming:function(row){

                let str = ""
                if (row.reality_start_time){
                    let date = new Date(row.reality_start_time.replace(/-/g,'/'))
                    let date2 = new Date()
                    let y = 0
                    if (row.reality_end_time){
                        date2 = new Date(row.reality_end_time.replace(/-/g,'/'))
                        y = 1;
                    }

                    var endTime = (date2.getTime() / 1000) - (date.getTime() / 1000);
                    var timeDay = parseInt(endTime / 60 / 60 / 24) + y;        //相差天数
                    if (date.toLocaleDateString() == date2.toLocaleDateString()){
                        timeDay = 0
                    }else {
                        timeDay = timeDay == 0 ? 1 : timeDay
                    }

                    let x = timeDay/(row.duration | 0)*100
                    str = x.toFixed(2) + "%"
                }
                return str;
            },
            checkPerson:function(id){
                if (this.user_id == id){
                    return true;
                }
                return  false
            },
            planBookClick:function (id) {
                this.planBook_id = id;
                let index = this.tableData.findIndex(a=>a.id == id)
                if (index != -1){
                    let data = this.tableData[index]

                    if (this.$refs.planBookView){
                        this.$refs.planBookView.openDialog(data);
                    }
                }

            },
            createMeeting:function(id){
                let index = this.tableData.findIndex(a=>a.id == id)
                if(index != -1){
                    this.$comFun.goMeetingCreate(2,{id:id,name:this.tableData[index].project_name})
                }

            },
            createMeeting1:function(id){
                let index = this.tableData.findIndex(a=>a.id == id)
                if(index != -1){
                    this.$comFun.goMeetingCreate(5,{id:id,name:this.tableData[index].project_name})
                }

            },
            auditProject:function(id){
                this.$api.PROJECT_MANAGER_PROJECT_STATUS(id,5).then(res=>{
                    if (res.code == 200){
                        this.$message.success("成功")

                        this.getList()
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            planBookCheck:function(id){
                this.$api.PROJECT_MANAGER_PROJECT_STATUS(id,3).then(res=>{
                    if (res.code == 200){
                        this.$message.success("成功")

                        this.getList()
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            confirmDataBack (data) {

                this.$api.PROJECT_START_PROJECT_UPDATE_BOOK(this.planBook_id,{project_design_book:data}).then(res=>{
                    if (res.code == 200){
                        this.$message.success("成功")

                        this.getList()
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            rowStyle({ row, rowIndex}){
                let stylejson= {}
                return stylejson
            },
            getList:function () {
                let data = {
                    with_me:this.screenData.with_me,
                    project_phases_id:this.screenData.project_phases_id,
                    project_status:this.screenData.status,
                    project_name:this.screenData.project_name,
                    project_category_id:this.screenData.project_category_id,
                    pager:{
                        limit:this.pageSize,
                        skip:this.pageNum,
                        OrderBy:'',
                        OrderMethod:-1
                    }
                }
                this.$api.PROJECT_MANAGER_PROJECT_LIST(data).then(res=>{
                    this.loading = false
                    if (res.code == 200){
                        this.tableData = res.data.data;
                        this.total = res.data.total;
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{
                    this.loading = false
                })
            },
            tableRowClick:function(row, column, event){
                if (column.label != '操作'){

                    this.$router.push({name:'projectManagementDetails',query:{id:row.id,t:new Date().getTime()}});
                }
            },
            detailsClick:function(item){
                this.$router.push({name:"projectManagementDetails",query:{id:item.id,t:new Date().getTime()}})
            },
            editClick:function (item) {
                this.$router.push({name:"projectManagementEdit",query:{id:item.id,t:new Date().getTime()}})
            },
            addClick:function () {
                this.$router.push({name:"projectManagementEdit"})
            },
            deleteClick:function (id) {
                this.$api.PROJECT_MANAGER_PROJECT_DELETE(id).then(res=>{
                    if (res.code == 200){
                        this.getList();
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            handleQuery:function () {
                this.pageNum = 1;
                this.getList()
            },
            resetQuery:function () {
                this.pageNum = 1;
                this.screenData.project_phases_id = "";
                this.screenData.status = 0;
                this.screenData.project_name = "";
                this.screenData.with_me = 0;
                this.screenData.project_category_id = '',
                this.getList()
            },
            typeChange:function (value) {
                this.pageNum = 1;
                this.getList();
            },
            statusChange:function(value){
                this.pageNum = 1;
                this.getList();
            },
            withChange:function(value){
                this.pageNum = 1;
                this.getList();
            },
            categoryChange:function(value){
                this.pageNum = 1;
                this.getList();
            },
            cascaderChange:function(node){
                if(node && node[1]){
                    let a = this.departmentMembers.findIndex(a=>a.id == node[1])
                    if (a != -1){
                        //this.value = this.value + "/" + this.departmentMembers[a].user_name
                        this.datas.project_person_in_charge_id = this.departmentMembers[a].id
                        this.datas.project_person_in_charge = this.departmentMembers[a].user_name
                    }
                }

            },
            handleClose:function(){
                this.dialogVisible = false;
            },
            confirmClick:function () {

                this.$api.PROJECT_MANAGER_PROJECT_CREATE_STAGE(this.datas).then(res=>{
                    if (res.code == 200){
                        // this.$router.push({name:"projectManagementEdit",query:{id:res.data}})
                        this.pageNum = 1;
                        this.getList()
                    }else {
                        this.$message.error(res.msg)
                    }
                })
            },
            startNext:function (id) {
                this.datas = {
                    id:id,
                    value:[],
                    project_person_in_charge_id:'',
                    project_person_in_charge:'',
                }

                if (this.$refs.person){
                    this.$refs.person.openDialog()
                }
            },
            stopClick:function (row) {
                this.project = row
                this.project_id = row.id
                this.stopVisible = true;
            },
            reportClick:function(data){
                if (this.$refs.reportDialog){
                    this.$refs.reportDialog.showDialog(data)
                }
            },
            endClick:function(data){
                if (this.$refs.endDialog){
                    this.$refs.endDialog.showDialog(data)
                }
            },
            refreshClick:function (id) {
                this.$api.PROJECT_MANAGER_PROJECT_STATUS(id,10).then(res=>{
                    if (res.code == 200){
                        this.$message.success("成功")
                        this.getList();
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            stopClose:function () {
                this.stopVisible = false;
            },
            stopConfirm:function () {

                if (this.$refs.stopView){
                    this.$refs.stopView.validateFun().then(()=>{
                        this.stopVisible = false;

                        this.$api.PROJECT_START_PROJECT_STOP_CREATE(this.$refs.stopView.datas).then(res=>{
                            if (res.code == 200){
                                this.getList();
                            }else {
                                this.$message.error(res.msg)
                            }
                        }).catch(err=>{

                        })
                    })

                }


            }
        }
    }
</script>

<style lang="scss">
  @import "../../../../assets/scss/views/projectManagement/list/list.scss";
</style>
